/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
  AlertIOS,
} from 'react-native';
var  Wine = require('./wine.json');
var Dimensions = require('Dimensions');
var screenWidth= Dimensions.get('window').width;
var  AListViewDemo = React.createClass({
    //设置初始值
    getInitialState()
    {
      //1.1 设置数据源
        var  ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2});
        //1.2设置返回数据
        return{
          dataSource: ds.cloneWithRows(Wine)
        }
    },
    //设置render函数
    render(){
      return(
          <ListView
          dataSource={this.state.dataSource} //数据源
          renderRow={this.renderRow}
          />
      );
    },
    //返回具体的Row
    renderRow(rowData,sectionID,rowID,highlightRow){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('点击了'+rowID+'行')}}>
            <View style={styles.cellViewStyle}>
                {/*左边的图片*/}
                <Image source={{uri:rowData.image}} style={styles.leftImageStyle}/>
                {/*右边的图片*/}
                <View style={styles.rightViewStyle}>
                    <Text style={styles.topTitleStyle}>{rowData.name}</Text>
                    <Text style={styles.bottomTitleStyle}>¥{rowData.money}</Text>
            </View>
            </View>
            </TouchableOpacity>
        )

    }
})

const styles = StyleSheet.create({
    cellViewStyle:{
        padding: 10,
      backgroundColor:'white',
        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5,
        //确定主轴方向
        flexDirection: 'row'
    },
    leftImageStyle:{
      width:60,
      height:60,
      marginRight:15,
    },
    rightViewStyle:{
      //主轴对其方式
        justifyContent:'center',
    },
    topTitleStyle:{
       color:'gray',
        fontSize: 15,
        width:screenWidth * 0.7,
        marginBottom:10,
    },
    bottomTitleStyle:{
        color:'red',
        fontSize: 14,
    },
});

AppRegistry.registerComponent('AListViewDemo', () => AListViewDemo);
